<template>
  <lay-card :bordered="true">
    <ContentHeader />
    <Loading :loading="isLoading">
      <!-- 操作区域 -->
      <TableAction>
        <lay-row>
          <lay-col :span="8" :offset="10">
            <lay-input
              size="xs"
              style="max-width: 200px; min-width: 100px"
              v-model="queryParam.search"
              placeholder="请输入角色名称"
              allow-clear
            />
            <lay-button size="xs" style="margin-left: 10px" @click="loadData"
              >查询</lay-button
            >
            <lay-button size="xs" v-auth:add type="primary" @click="handleAdd"
              >新增</lay-button
            >
          </lay-col>
        </lay-row>
      </TableAction>

      <!-- 表格内容 -->
      <lay-table
        ref="table"
        :id="'role_id'"
        :size="'xs'"
        children-column-name="children"
        :resize="true"
        :autoColsWidth="false"
        :default-toolbar="false"
        :maxHeight="'500px'"
        :width="'100%'"
        :loading="isLoading"
        :columns="columns"
        :data-source="data_list"
        :expand-index="1"
        :indent-size="20"
        skin="line"
        :default-expand-all="true"
      >
        <!-- 菜单ID 名称 -->
        <template #action="{ row }">
          <lay-button size="xs" type="primary" v-auth:edit @click="handleEdit(row)"
            >编辑</lay-button
          >
          <lay-button size="xs" type="danger" v-auth:delete @click="handleDelete(row)"
            >删除</lay-button
          >
        </template>
      </lay-table>
    </Loading>
    <AddForm ref="AddFormRef" @callback="loadData" />
    <EditForm ref="EditFormRef" @callback="loadData" />
  </lay-card>
</template>

<script setup>
import { ref } from "vue";
import * as Api from "@/api/user/role";
import { refreshScrollTop } from "@/utils/tool";
import { info } from "@/utils/message";
import { layer } from "@layui/layui-vue";
import * as menuApi from "@/api/menu/index";

import AddForm from "./modules/AddForm.vue";
import EditForm from "./modules/EditForm.vue";

const table = ref(undefined);
// 数据列表
const data_list = ref([]);
// 查询参数
const queryParam = ref({
  search: "",
});
// 正在加载
const isLoading = ref(false);
// 表头
const columns = ref([
  {
    title: "角色ID",
    key: "role_id",
    width: "100px",
    // fixed: "left",
    align: "center",
  },
  {
    title: "角色名称",
    key: "name",
    width: "180px",
    // fixed: "left",
    align: "center",
  },
  {
    title: "排序",
    width: "180px",
    key: "sort",
    align: "center",
  },
  {
    title: "添加时间",
    width: "180px",
    key: "create_time",
    align: "center",
  },
  {
    title: "更新时间",
    width: "180px",
    key: "update_time",
    align: "center",
  },
  {
    title: "操作",
    width: "130px",
    fixed: "right",
    key: "action",
    ignoreExport: true,
    customSlot: "action",
    align: "center",
  },
]);
const AddFormRef = ref(undefined);
const EditFormRef = ref(undefined);
// 菜单列表
const menuList = ref([]);

// 加载数据方法 必须为 Promise 对象
const loadData = () => {
  // 重置滚动高度
  refreshScrollTop();

  isLoading.value = true;
  Api.list(queryParam.value)
    .then((response) => {
      const {
        data: { list },
      } = response;
      if (list) {
        // 数据列表
        data_list.value = list;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};

// 默认加载数据
loadData();

// 获取权限信息
isLoading.value = true;
menuApi
  .all()
  .then((result) => {
    if (result.status == 200) {
      const {
        data: { list },
      } = result;
      menuList.value = list;
    }
  })
  .finally(() => {
    isLoading.value = false;
  });

// 新增记录
const handleAdd = () => {
  AddFormRef.value.show(menuList.value, data_list.value);
};

// 编辑记录
const handleEdit = (item) => {
  EditFormRef.value.show(item, menuList.value, data_list.value);
};

// 删除记录
const handleDelete = (item) => {
  layer.confirm(
    "<p style='color:red;'><b>⇢</b>【" + item.name + "】<br/>删除后不可恢复!</p>",
    {
      title: "您确定要删除该记录吗? ",
      shade: true,
      shadeOpacity: 0.3,
      isHtmlFragment: true,
      btn: [
        {
          text: "确定",
          callback: (id) => {
            // 发起删除请求
            Api.deleted({ roleId: item["role_id"] })
              .then((result) => {
                // 提示
                info(result.message);
                // 刷新数据
                loadData();
              })
              .finally(() => {
                layer.close(id);
              });
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    }
  );
};
</script>
